<template>
  <view class="container">
    <!-- 提示信息 -->
    <view class="tip">
      <text>请确保提交认证资料的真实，账号仅限本人使用，否则您可能将承担相应的违法违规后果。</text>
    </view>

    <!-- 下载模版步骤 -->
    <view class="section">
      <view class="steps">
		<view class="step-item">
		  <view class="step-dot"></view>
		  <text class="step">下载平台提供的模版</text>
		  <view class="step-action">
			<button class="download-button" @click="downloadTemplate">
				<uni-icons type="arrowthindown" size="7" color="#fff" ></uni-icons>
				<text class="download-text">下载模版</text>
			</button>
		  </view>
		</view>
		<view class="step-item">
		  <view class="step-dot"></view>
		  <text class="step"> 将模版打印并加盖公章</text>
		</view>
		<view class="step-item">
		  <view class="step-dot"></view>
          <text class="step"> 将完善后的模版拍照并上传</text>
		</view>
      </view>
	  
	  <image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf2dbc69ec.png" class="upload" @click="uploadTemplate"></image>
    </view>

    <!-- 注意事项 -->
    <view class="section">
      <text class="section-title">注意事项</text>
      <view class="notes">
        <text class="note">1. 下载模版后打印并加盖公章</text>
        <text class="note">2. 落款日期在30日以内</text>
        <text class="note">3. 在证明中需包含公司授权您的招聘信息</text>
      </view>
    </view>

    <!-- 自动填充提示 -->
    <view class="auto-fill-tip">
      <text>为了方便您填写认证材料，系统将为您自动填充实名信息，如有疑问请联系人工客服。</text>
    </view>

    <!-- 其他认证方式 -->
    <view class="other-options">
      <text class="other-options-text">其他认证方式</text>
    </view>
  </view>
</template>

<script>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'; // 根据实际路径调整
export default {
	components: {
	    uniIcons,
	  },
  methods: {
    // 下载模版
    downloadTemplate() {
      const fileUrl = "https://example.com/template.docx"; // 替换为实际模版文件地址
      uni.downloadFile({
        url: fileUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.showToast({
              title: "下载成功",
              icon: "success",
            });
            // 保存文件到本地
            uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: (saveRes) => {
                console.log("文件保存路径：", saveRes.savedFilePath);
              },
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: "下载失败",
            icon: "none",
          });
          console.error("下载失败：", err);
        },
      });
    },

    // 上传模版
    uploadTemplate() {
      uni.chooseImage({
        count: 1, // 只能选择一张图片
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          uni.showToast({
            title: "上传成功",
            icon: "success",
          });
          // 这里可以调用上传接口，将图片上传到服务器
          console.log("上传的图片路径：", tempFilePaths);
        },
        fail: (err) => {
          uni.showToast({
            title: "上传失败",
            icon: "none",
          });
          console.error("上传失败：", err);
        },
      });
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}

.tip {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #555;
  margin-bottom: 10px;
}

.steps {
  position: relative;
}

.steps::before {
  content: "";
  position: absolute;
  left: 5px; /* 调整竖直线位置 */
  top: 10px; /* 调整竖直线起始位置 */
  width: 2px; /* 竖直线宽度 */
  height: calc(100% - 20px); /* 竖直线高度 */
  background-color: #2F318B; /* 竖直线颜色 */
}

.step-item {
  position: relative;
  margin-bottom: 20px; /* 调整步骤之间的间距 */
}

.step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #2F318B; /* 圆点颜色 */
  position: absolute;
  left: 0;
  top: 4px; /* 调整圆点垂直位置 */
}

.uni-icons {
  vertical-align: middle; /* 垂直居中 */
}

.step {
  font-size: 14px;
  color: #666;
  display: block;
  margin-left: 20px; /* 调整文字与圆点的间距 */
  margin-bottom: 8px;
}

.step-action {
  width: 100%;
    display: flex;
    justify-content: flex-start; /* 靠左对齐 */
    margin-bottom: 15px;
	 margin-left: 20px; /* 调整按钮与圆点的间距 */
	  margin-top: 10px; /* 调整按钮与文字的间距 */
}

.upload{
	width: 83px;
	height: 79px;
}

.notes {
  margin-left: 15px;
}

.note {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 8px;
}

.auto-fill-tip {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.download-button {
	display: flex;
	  align-items: center; /* 垂直居中 */
	  justify-content: center; /* 水平居中 */
	  
	  height: 15px; /* 调整高度 */
	  border-radius: 16px;
	  background: #2F318B;
	  color: #fff;
	  font-size: 12px; /* 调整字体大小 */
	  font-weight: 400;
	  padding: 5px 10px;
	  margin: 0;
}

.download-text{
	font-size: 6px;
	 margin-left: 2px; /* 调整文字和图标之间的间距 */
}

.other-options {
  margin-top: 20px;
  text-align: center;
}

.other-options-text {
  font-size: 16px;
  font-weight: bold;
  color: #007bff;
}
</style>